<template>
<div>
  <van-tabs v-model="active"  @click="onClick" line-width="60" :class="{header:isActive}">
  <van-tab title="正在热映" to="/films/nowPlaying"></van-tab>
  <van-tab title="即将上映" to="/films/comingSoon"></van-tab>
</van-tabs>
<div>
  <router-view></router-view>
</div>
</div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      active: 0,
      url: ["/films/nowPlaying", "/films/comingSoon"],
      isActive:false
    };
  },
    methods: {
        /**
         * index：选项卡的索引
         * title：选项卡的标题
         */
        onClick(index, title) {
            console.log(index, title);
            this.$router.push(this.url[index]);
        },
    },
    // 生命周期解决刷新问题
    created() {
      // console.log(this.active);
        this.active = this.url.indexOf(this.$route.path);
    },
    mounted(){
      window.addEventListener("scroll",()=>{
        let scrollTop = document.documentElement.scrollTop;
        if(scrollTop>=200){
          this.isActive = true
        }else{
          this.isActive = false
        }
      })
    }
};
</script>

<style lang="scss" scoped>
.header{
  position: fixed;
  z-index: 9999;
  width: 100%;
}
</style>